<template>
	<view>
		<!-- cate -->
		<!-- 搜索区域-自定义组件 -->
		<my-search 
			v-bind:bgc="'#c10000'" 
			v-bind:borRadius="15"
			v-on:click="gotoSearch"></my-search>
		
		<!-- 商品分类滚动区域 -->
		<view class="scroll_container">
			<!-- 左侧区域 -->
			<scroll-view scroll-y="true" class="scroll_left" v-bind:style="{height: scrollHeight + 'px'}">
				<block v-for="(item1, index1) in cateLevel1" v-bind:key="index1" >
					<view 
					v-bind:class="['left_item', active === index1 ? 'active' : '' ]"
					v-on:click="getIndex(index1)"
					>{{ item1.cat_name }}</view>
				</block>
			</scroll-view>
			
			<!-- 右侧区域 -->
			<scroll-view 
				scroll-y="true" 
				class="scroll_right" 
				v-bind:style="{height: scrollHeight + 'px'}" 
				v-bind:scroll-top="scrollTop">
				<block 
					v-for="(item2, index2) in cateLevel2" 
					v-bind:key="index2" >
					<!-- 标题 -->
					<view class="right_title">/ {{ item2.cat_name }} /</view>
					<!-- 主题内容 -->
					<view class="right_container">
						<view 
							class="right_iteam" 
							v-for="(item3, index3) in cateLevel2[index2].children" 
							v-bind:key="index3">
							<image 
								v-bind:src="item3.cat_icon.replace('dev','web')" 
								mode="widthFix" 
								v-on:click="gotoList(item3.cat_id)"></image>
							<text>{{ item3.cat_name }}</text>
						</view>
					</view>
					
				</block>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: null, // 存放 scroll-view 组件高度的值
				cateLevel1: null, // 存放分类页面的所有数据
				cateLevel2: null, // 存放分类页面的二级列表数据
				active: 0, // 点击选中的一级分类
				scrollTop: 0 // 设置滚动条的位置
			};
		},
		onLoad() {
			this.getHeight(),
			this.getCateData()
		},
		methods: {
			// 获得屏幕可用的高度, 直接赋值到 scroll-view 组件中
			getHeight() {
				const _this = this // 看见 this 重定向, 我笑了
				uni.getSystemInfo({
					success: function (res) {
							_this.scrollHeight = res.windowHeight - 52
						}
				})
			},
			// 获取商品分类页面的数据
			async getCateData() {
				const {data: res} = await uni.$http.get('/api/public/v1/categories')
				if (res.meta.status !== 200) return uni.$showMsg()
				this.cateLevel1 = res.message
				this.cateLevel2 = res.message[0].children
			},
			// 点击左侧列表, 获取当前的下标
			getIndex(index) {
				this.active = index
				this.cateLevel2 = this.cateLevel1[index].children // 重新给 leve2 列表赋值
				this.scrollTop = this.scrollTop === 0 ? 1 : 0 // 切换一级分类后, 重置滚动条的位置.
			} ,
			// 点击三级分类, 跳转到商品列表页面
			gotoList(name) {
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?cid=' + name
				})
			},
			// 点击搜索框, 去往搜索页面
			gotoSearch() {
				// console.log(1)
				uni.navigateTo({
					url: '/subpkg/goods_search/goods_search'
				})
			}
		}
	}
</script>

<style lang="scss">
	// 商品分类滚动区域
	.scroll_container {
		display: flex;
		
		// 分类页面的左侧分类
		.scroll_left {
			width: 120px;
			
			.left_item {
				background-color: #f7f7f7;
				line-height: 60px;
				text-align: center;
				font-size: 12px;
				border-radius: 10px;
				
				// 左侧列表选中的样式
				&.active {
					position: relative;
					background-color: #fff;
					font-weight: 700;
					
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						display: inline-block;
						width: 5px;
						height: 30px;
						background-color: pink;
						border-radius: 5px;
					}
				}
			}
			
		}
		
		// 右侧列表样式
		.scroll_right {
			// height: 120px;
			background-color: #fff;
			// 标题
			.right_title {
				margin: 10px 0;
				font-weight: 700;
				font-size: 14px;
				text-align: center;
			}
			// 主题内容
			.right_container {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				 
				 .right_iteam {
					 display: flex;
					 flex-direction: column;
					 align-items: center;
					  width: 33.33%;
						
						image {
							 width: 60px;
							 height: 60px;
						 }
						 text {
							 font-size: 12px;
						 }
				 }
				 
			}
		}
	}
</style>
